<template>
  <div v-if="data" class="bg-[url('assets/imgs/bg.jpg')] bg-cover  h-screen text-white p-5 flex overflow-hidden ">
    <!-- 左 -->
    <div class=" flex-1 mr-5 bg-opacity-50 bg-slate-800 p-3 flex flex-col ">
      <!-- 横向数据图 -->
      <HorizontalBar class=" h-1/3 box-border pb-4 " :data="data.regionData" />
      <!-- 雷达图 -->
      <ReadarBar class=" h-1/3 box-border pb-4 "  :data="data.riskData" />
      <!-- 关系图 -->
      <Relation  class=" h-1/3 "/>
    </div>
    <!-- 中 -->
    <div class=" w-1/2 mr-5 flex flex-col ">
      <!-- 数据总览图 -->
      <TotalData class=" bg-opacity-50 bg-slate-800 p-3 " />
      <!-- 地图可视化 -->
      <MapChart class=" bg-opacity-50 bg-slate-800 p-3 mt-4 flex-1 "/>
    </div>
    <!-- 右 -->
    <div class=" flex-1 bg-opacity-50 bg-slate-800 p-3 flex flex-col ">
      <!-- 竖向柱状图 -->
      <VerticalBar class=" h-1/3 box-border pb-4 " :data="data.serverData" />
      <!-- 环形图 -->
      <RingBar class=" h-1/3 box-border pb-4 "/>
      <!-- 文档云图 -->
      <WordCloud class=" h-1/3 " />
    </div>
  </div>
</template>

<script setup>
import HorizontalBar from '@/components/HorizontalBar.vue'
import WordCloud from './components/WordCloud.vue'
import VerticalBar from './components/VerticalBar.vue'
import TotalData from './components/TotalData.vue'
import RingBar from './components/RingBar.vue'
import Relation from './components/Relation.vue'
import ReadarBar from './components/ReadarBar.vue'
import MapChart from './components/MapChart.vue'

import { getVisualization } from '@/api/visualization.js'
import {ref,onMounted} from "vue"

const data = ref(null)
const loadData = async ()=>{
  data.value = await getVisualization()
  // console.log('data.value=>',data.value);
}
onMounted (()=>{
  setInterval(async() => {
    await loadData()
  }, 3000);
})

</script>

<style lang="scss" scoped>

</style>